<template>
	<view class="container">
		<scroll-view class="scroll-container" scroll-y="true" :scroll-into-view="toView" @scroll="scrollLeftLocation"
			scroll-with-animation="true">
			<!-- <view class="common-text-view pad28-8-6">常用</view> -->
<!-- 			<scroll-view class="scroll-view-class" :scroll-x="true">
				<view class="scroll-view-class-box">
					<view v-for="(commonItem,commonIndex) in commonLocation" :key="commonIndex">
						<view class="content-item-view" @click="commonClick()">
							<view class="name-text">{{commonItem.name}}</view>
						</view>
					</view>
				</view>
			</scroll-view> -->
			<view v-for="(item1, index1) in locationDataList" :key="index1" :id="item1.key">
				<view class="commonScroll">{{ item1.key }}</view>
				<view v-for="(item2, index2) in item1.value" :key="index2" class="brand-item" :class="{'active': currentProvince.id === item2.id}">
					<view @click="click_item(item2)">
						<view class="name-text-view">{{ item2.name }}</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 右侧字母导航条 -->
		<view class="letter-nav">
			<view :class="temp==index?'right-view-text-select':'right-view-text'"
				v-for="(item, index) in locationDataList" :key="index" @click="toSelectIndex(item.key,index)">
				{{item.key}}
			</view>
		</view>
		<!-- 选择地区 -->
		<uni-popup ref="popRight" type="right">
			<view class="neishi">
				<view class="model-list">
					<view :class="{'active': current}" class="model-item" v-for="(item,index) in cityList" :key="index" @click="cityClick(item)" >
						<text class="name">{{item.name}}</text>
						<text class="price" v-if="item.guide_price">{{item.guide_price}}万</text>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getAddressEconomizeList,
		getAddressMarketList
	} from '@/api/base.js'
	export default {
		data() {
			return {
				temp: 0,
				toView: '',
				commonLocation: [],
				locationDataList: [],
				selectInta:0,
				users_id:'',
				topList:[],
				cityList:[],
				currentProvince: {}
			}
		},
		onLoad(option) {
			if(option.selectInta){
				this.selectInta = option.selectInta
			}
			const value = uni.getStorageSync('login')
			if(value){
				this.users_id = value.id
			}
			
			var that = this
			// getcommonLocationList(this.users_id).then(res => {
			// 	that.commonLocation = res.data
			// })

			//获取省数据
			getAddressEconomizeList().then(res => {
				that.$utils.log("打印获取到的网络省 " + JSON.stringify(res))
				if (res.code == 0) {
					that.locationDataList = res.data
					that.$forceUpdate()
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}
			})

		},
		onReady() {
			setTimeout(() => {
				this.getNodesInfo()
			}, 2000)
		},
		methods: {
			getNodesInfo() {
				const query = uni.createSelectorQuery().in(this)
				query.selectAll('.commonScroll').boundingClientRect().exec(data => {
					let res = data[0];
					let rel = [];
					res.map(item => {
						rel.push(item.top);
					});
					this.topList = rel;
				});
			},
			scrollLeftLocation(e) {
				let scrollTop = e.target.scrollTop;
				for (let i = 0; i < this.topList.length; i++) {
					let h1 = this.topList[i];
					let h2 = this.topList[i + 1];
					if (scrollTop >= h1 && scrollTop < h2) {
						this.temp = i;
					}
				}
			},
			toSelectIndex(item, index) {
				this.toView = item
				this.temp = index
			},
			click_item(item) {
				this.currentProvince = item
				this.getCity(item)
			},
			commonClick(item) {
				this.currentProvince = item
				this.getCity(item)
			},
			getCity(item){
				getAddressMarketList(item.id).then( res => {
					this.$refs.popRight.open()
					this.cityList = res.data
				})
			},
			cityClick(item){
				this.currenNeishi = item
				var pages = getCurrentPages()
				var prevPage = pages[pages.length - 2]
				prevPage.$vm.backData({
					type: 'region',
					data: {
						where_province: this.currentProvince,
						where_city: item
					}
				}) 
				uni.navigateBack({
					delta: 1
				})
			}

		}
	}
</script>

<style scoped lang="scss">
	.container{
		background-color: #F7F8FA;
	}
	.scroll-view-class {
		white-space: nowrap;
		background-color: white;
		height: auto;
	}

	.scroll-view-class-box {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: auto;
	}

	.content-item-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.scroll-container {
		height: 100vh;
	}

	.letter-nav {
		display: flex;
		position: fixed;
		right: 14rpx;
		top: 0;
		height: 100%;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.right-view-text {
			font-size: 26rpx;
			font-family: DIN Alternate;
			font-weight: bold;
			color: #9B9B9B;
			margin: 10rpx 0;
		}
		
		.right-view-text-select {
			color: #0E59EA;
			font-weight: bold;
			margin: 10rpx 0;
		}
	}


	.common-image-brand-view-class {
		width: 60rpx;
		min-height: 30rpx;
		height: auto;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 22rpx;
		margin: 5rpx;
	}

	.common-text-brand-key {
		font-size: 32rpx;
		font-family: DIN Alternate;
		font-weight: bold;
		color: #1C2125;
		opacity: 1;
		padding: 8rpx 0px 6rpx 28rpx;
		background-color: #F4F4F4;
	}

	.commonScroll {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		padding: 13rpx 29rpx;
	}
	.brand-item{
		padding: 30rpx 29rpx;
		background-color: #fff;
		border-bottom: 1rpx solid #E6E6E6;
		&.active{
			background-color: #E6E6E6;
			.name-text-view{
				color: #0E59EA !important;
			}
		}
		&:last-child{
			border-bottom: none;
		}
		.contact-container {
			display: flex;
			align-items: center;
			.image-view {
				width: 54rpx;
			}
			.name-text{
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #000000;
				margin-left: 35rpx;
			}
		}
	}

	.common-box-brand-view-class {
		height: auto;
		width: auto;
		text-align: center;
		margin: 20rpx 0rpx 20rpx 30rpx;
	}
	.model-list{
		overflow-y: auto;
		height: 100%;
		.model-item{
			background-color: #fff;
			padding: 29rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #E6E6E6;
			&:last-child{
				// border-bottom: none;
			}
			&.active{
				background-color: #E6E6E6;
				text{
					color: #0E59EA !important;
				}
			}
			.name{
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #000000;
			}
			.price{
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #999999;
				white-space: nowrap;
			}
		}
	}
	.atitle{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		padding: 15rpx 25rpx;
	}
	.neishi{
		width: 550rpx;
		height: 100vh;
		background-color: #fff;
	}
</style>